<!--vue模板-->
<template>
  <div>
    <div class="tip">咨询信息</div>
    <el-form class="formData">
      <el-form-item label="联系工程师">
        <el-select v-model="data.saleId">
          <el-option
            v-for="item in saleOptions"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="询价类型">
        <el-radio-group v-model="data.type">
          <el-radio :value="1">询价单</el-radio>
          <el-radio :value="2">咨询单</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div class="tip">产品信息</div>
    <el-table :data="tableData" style="width: 1000px; margin: auto" border>
      <el-table-column prop="picurl" label="产品图片" width="100" />
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="model" label="产品型号" width="150" />
      <el-table-column prop="price" label="产品价格" width="150" />
      <el-table-column label="需求数量" width="180">
        <template v-slot="{ row }">
          <el-input-number v-model="row.num" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template v-slot="{ row }">
          <el-button @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 1000px; margin: 20px auto; text-align: right">
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref } from "vue";
const data = ref({
  saleId: "",
  type: 1
});

const tableData = ref([
  { model: " ", name: "sss", num: 10, picurl: "", pid: 1, price: 1999 },
  { model: "", name: "编辑器", num: 1, picurl: "", pid: 2, price: 1999 }
]);

function del(row) {
  let index = tableData.value.indexOf(row);
  tableData.value.splice(index, 1);
}

const saleOptions = [
  {
    id: 1,
    name: "张三"
  },
  {
    id: 2,
    name: "李四"
  }
];

function save() {
  data.value.customerInquiryDetails = tableData.value;
  console.log("data.value>>>>", data.value);
}
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.tip {
  width: 1000px;
  margin: auto;
  height: 60px;
  line-height: 60px;
  border: #ccc solid 1px;
  padding-left: 20px;
}

.formData {
  width: 1000px;
  margin: auto;
  background-color: #fff;
  padding: 20px;
}
</style>
